<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work3</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .div1{
            text-align: center;
        }
        .div2{
            float: left;
            text-align: center;
            width: 300px;
            margin-top: 50px;
            margin-left: 30px;
            border: 1px dotted;
            border-radius: 20px;
            background-color:lightcyan
        }
        .myimg{
            border-radius: 75px;
        }
        .div3{
            margin: 10px;
            color:#B8B8B8;;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="div1">
            <h2>网校名师</h2>
        </div>
        <div>
            <div class="div2" v-for="teacher in teachers">
                <div class="div3">
                    <img :src="teacher.headimg" alt="" width="150px" height="150px" class="myimg">
                </div>
                <div class="div3" style="font-size: x-large;">
                    {{teacher.name}}
                </div>
                <div class="div3">
                    {{teacher.title}}
                </div>
                <hr class="div3" style="height: 0.5">
                <div class="div3">
                    {{teacher.resume}}
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            teachers:[
                {headimg:"../images/model6.jpg",name:"智子",title:"教授1",resume:"1自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校"},
                {headimg:"../images/model2.jpg",name:"汪淼",title:"教授2",resume:"2自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校"},
                {headimg:"../images/model5.jpg",name:"史强",title:"教授3",resume:"3自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校"},
                {headimg:"../images/model4.jpg",name:"文王",title:"教授4",resume:"4自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校，自2020年博士毕业后，加入我校"}
            ]
        }
    });
</script>